<template>
  <div class="photo-info">
    <div class="title">
      <h1>{{list.title}}</h1>
      <p>
        <span>发表时间：{{list.add_time | dateFormat}}</span>
        <span>点击：{{list.click}}次</span>
      </p>
      <hr>
    </div>
    <div class="img-list">
      <vue-preview :slides="imgList" @close="handleClose"></vue-preview>
    </div>
    <div class="content" v-html="list.content"></div>

    <comment :newId="id"></comment>
  </div>
</template>


<script>
import comment from "../subcomponent/Comment.vue";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      id: this.$route.params.id,
      list: {},
      imgList: []
    };
  },
  created() {
    this.getInfo();
    this.getImgList();
  },
  methods: {
    getInfo() {
      this.$http.get("api/getimageInfo/" + this.id).then(rs => {
        let data = rs.body;
        if (data.status == 0) {
          this.list = data.message[0];
        }
      });
    },
    getImgList() {
      this.$http.get("api/getthumimages/" + this.id).then(rs => {
        let data = rs.body;
        if (data.status === 0) {
          data.message.forEach((element, index) => {
            element.w = 600;
            element.msrc = element.src;
            element.title = "image" + index;
            element.h = 400;
          });
          this.imgList = data.message;
        }
      });
    },
    handleClose() {
      console.log("close event");
    }
  },
  components: {
    comment
  }
};
</script>   


<style lang="scss">
.photo-info {
  padding: 0 5px;
  .title {
    h1 {
      text-align: center;
      font-size: 14px;
      color: royalblue;
      margin: 10px 0;
    }
    p {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
    }
  }
  .content {
    font-size: 12px;
    text-indent: 2em;
  }
  img {
    // touch-action: none;
  }
  .my-gallery {
    display: flex;
    flex-wrap: wrap;
    // justify-content:start;
    figure {
      margin: 10px;
      box-shadow: 0 0 4px #999;
      > a {
        display: block;
        img {
          width: 100px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
